<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.title" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getCategories">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table highlight-current-row v-loading="listLoading" @selection-change="selsChange
"
                :data="categoryData"
                style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="title" label="分类名称" width="220" >
            </el-table-column>
            <el-table-column prop="titleUg" label="分类名称(UG)" width="220" >
            </el-table-column>
            <el-table-column prop="parent" label="所属分类" width="220">
            </el-table-column>
            <el-table-column prop="src" label="分类图片" width="150" >
                <template  slot-scope="scope" >
                    <img :src="renderImage(scope.row.src)" height="60" style="margin-top: 3px" />
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="270" sortable="true" >
            </el-table-column>
            <el-table-column prop="status" label="状态" width="180"  :formatter="stateFormat" ></el-table-column>
            <el-table-column prop="actions" label="操作"  width="220" >
                <template slot-scope="scope" >
                    <el-button type="warning" v-if="scope.row.status==1" size="small" @click="handleState(scope.$index, scope.row)">隐藏</el-button>
                    <el-button type="success" v-if="scope.row.status==0" size="small" @click="handleState(scope.$index, scope.row)">显示</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->

        <el-col :span="24" class="toolbar">
            <template >
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-col>

        <el-col >
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
        </el-col>
        <!-- 添加，编辑 -->

        <!--新增界面-->
        <el-dialog :title="formTitle" v-model="formVisible" :close-on-click-modal="false">
            <el-form :model="categoryModel" label-width="120px"  ref="categoryModel" :rules="formRules" >
                <el-row >
                    <el-col :span="10"  >
                        <el-form-item label="分类名称" prop="title">
                            <el-input v-model="categoryModel.title" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"  >
                        <el-form-item label="分类名称(UG)" prop="title">
                            <el-input v-model="categoryModel.titleUg" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="所属分类" prop="parentId" >
                    <template>
                        <el-select v-model="categoryModel.parentId" filterable placeholder="请选择所属分类">
                            <el-option
                                    v-for="item in parentOptions"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="分类图片：" prop="src" >
                    <el-upload
                            action="/admin/category/upload"
                            :on-success="onUploadSuccess"
                            list-type="picture-card"
                    >
                        <i class="el-icon-upload" ></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态" prop="status" >
                    <el-radio-group v-model="categoryModel.status">
                        <el-radio class="radio" :label="1" >显示</el-radio>
                        <el-radio class="radio" :label="2">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    import {categoryStatus, deleteCategoryApi, getCategoryData, saveCategory, selectParents} from "../../api/api";
    export default {
        name: "List",
        data(){
            return {
                page:1,
                total:0,
                rowSize:8,
                pageSize:1,
                pageSizes:[8,12,15,18,24],
                filters:{
                    title:''
                },
                sels:[],
                listLoading: false,
                categoryData:[],
                categoryModel:{
                    status:1
                },
                parentOptions:[],
                formTitle:'新增',
                addLoading:false,
                formVisible:false,
                formRules:{
                    title:[
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            renderImage:function(src){
                return this.imageService+src;
            },
            getCategories(){
                this.listLoading = true
                let _this = this;
                let param = {
                    page: _this.page,
                    rowSize:_this.rowSize,
                    title: _this.filters.name
                };
                getCategoryData(param).then(res=>{
                   let result =  res.data;
                   if(result.code == 200){
                       let data = res.data.data;
                       _this.total = data.totalRow;
                       _this.categoryData = data.list;
                       _this.listLoading = false;
                   } else{
                       _this.$message({
                           type:'error',
                           message:'请求失败'
                       })
                   }
                })
            },
            handleAdd(){
                this.formVisible = true,
                this.formTitle = '新增'
                this.categoryModel = {
                    id:0,
                    status:1
                }
                this.getParents(0)
            },
            handleState(index,row){
                let question = '确定要隐藏该分类吗？'
                let params  ={
                    id: row.id,
                    status: 0
                }
                if(row.status==0){
                    question = '确定要显示该分类吗？'
                    params.status = 1;
                }
                this.$confirm(question, '提示', {}).then(() => {
                    this.addLoading = true;
                    categoryStatus(params).then((res) => {
                        if(res.code == 200){
                            this.addLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: params.status==0?'已隐藏':'已显示',
                                type: 'success'
                            });
                            // this.$refs['editForm'].resetFields();
                            // this.editFormVisible = false;
                            this.getCategories();
                        }
                    });
                })
            },
            handleEdit(index,row){
                this.formVisible = true
                this.formTitle = '修改'
                this.categoryModel = {
                    id:row.id,
                    title:row.title,
                    titleUg:row.titleUg,
                    src:row.src,
                    status:row.status,
                    parentId:row.parentId
                }
                this.getParents(row.id)
            },
            handleDel(index,row){
                this.$confirm('确认删除该分类吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { id: row.id };
                    deleteCategoryApi(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getCategories();
                    });
                }).catch(() => {

                });
            },
            getParents(id){
                let _this = this;
                selectParents({id:id}).then(resp=>{
                    _this.parentOptions = resp.data.data
                    _this.parentOptions.push({
                        id:0,
                        title:'顶级分类'
                    })
                })
            },
            selsChange(sels){
                this.sels = sels;
            },
            batchRemove(){

            },
            stateFormat(row){
                return row.status == 1?'正常':'禁用'
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getCategories();
            },
            handleSizeChange(val){
               this.rowSize = val
               this.getCategories();
            },
            onUploadSuccess(res,file){
                if(res.code == 200){
                    this.categoryModel.src = res.data.path
                }
            },
            submit(){
                    let _this = this;
                this.$refs.categoryModel.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.categoryModel);
                            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                            saveCategory(para).then((res) => {
                                if(res.code == 200){
                                    this.addLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.$refs['categoryModel'].resetFields();
                                    this.formVisible = false;
                                    this.getCategories();
                                }else{
                                    _this.$message({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            });
                        });
                    }
                });
            }
        },
        mounted() {
            this.getCategories();
        }
    }
</script>

<style scoped>

</style>
